<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 794px;
            margin: 0 auto;
            border: 1px dashed rgb(10, 10, 10);
            padding: 5px;
        }

        .table {
            width: 620px;
            margin: 0 auto;
        }

        p {
            font-size: 18px;
            line-height: 1.2em;
            border-bottom: 1px solid rgb(10, 10, 10);
            padding-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">

            <div class="table" v-for="(page, index) in formatList" :key="index">

                <div v-if="index===0" class="title">谈话记录</div>
                <div v-else>附页</div>
                <div v-for="(item, _i) in page" :key="_i">
                    <p>{{item}}</p>
                </div>
                <div>
                    <div>签名1：</div>
                    <div>签名2：</div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script>


    const questionsList = [
        {
            "id": "6436936350697472",
            "emquireId": "6328359564904448",
            "question": "",
            "answer": null,
            "orderNo": 0
        },
        {
            "id": "6436936350779392",
            "emquireId": "6328359564904448",
            "question": "我们接调度室电话赶到事故现场，发现冀F3Z5Q8小型普通客车因发生交通事故，造成路产损失，现对有关情况向你进行调查。你知道吗？",
            "answer": "知道。",
            "orderNo": 1
        },
        {
            "id": "6436936350828544",
            "emquireId": "6328359564904448",
            "question": "你的姓名、年龄、工作单位及职业？",
            "answer": "我叫王会齐，53岁，个体司机。",
            "orderNo": 2
        },
        {
            "id": "6436936350894080",
            "emquireId": "6328359564904448",
            "question": "你是车辆的所有权人吗？",
            "answer": "是。",
            "orderNo": 3
        },
        {
            "id": "6436936350943232",
            "emquireId": "6328359564904448",
            "question": "车辆所有权人是谁？",
            "answer": "",
            "orderNo": 4
        },
        {
            "id": "6436936350992384",
            "emquireId": "6328359564904448",
            "question": "请你叙述事故发生的经过？",
            "answer": "2025年05月23日19时40分我驾驶冀F3Z5Q8小型普通客车行驶至荣乌高速山西方向K901+000处，因发生交通事故造成路产损失。",
            "orderNo": 5
        },
        {
            "id": "6436936351057920",
            "emquireId": "6328359564904448",
            "question": "我们需要对损坏现场进行勘验，来确定具体的路产损失数量，勘验结果将作为你赔偿公路路产损失的事实依据。请你配合到场。",
            "answer": "知道。",
            "orderNo": 6
        },
        {
            "id": "6436936351107072",
            "emquireId": "6328359564904448",
            "question": "你对我们的调查享有陈述和申辩的权利，你知道吗？",
            "answer": "知道。",
            "orderNo": 7
        },
        {
            "id": "6436936351172608",
            "emquireId": "6328359564904448",
            "question": "请看谈话记录与你的陈述是否一致？",
            "answer": "一致。",
            "orderNo": 8
        },
        {
            "id": "6436936351238144",
            "emquireId": "6328359564904448",
            "question": "请看谈话记录的内容是否属实？",
            "answer": "属实。",
            "orderNo": 9
        },
        {
            "id": "6436936351303680",
            "emquireId": "6328359564904448",
            "question": "请签字摁手印，12345678910",
            "answer": "好的。1234",
            "orderNo": 10
        }
    ];


    let formatList = questionsList.filter(item => item.answer && item.question)
    console.log(formatList);
    formatList = formatList.reduce((acc, item) => {
        acc.push(...splitStringByMaxLength("问：" + item.question, 31))
        acc.push(...splitStringByMaxLength("答：" + item.answer, 31))
        return acc
    }, []);

    console.log(formatList);

    formatList = convertToDynamic2DArray(formatList)

    console.log(formatList);
    // 字符串分割函数 - 字母数字按半个字符计算
    function splitStringByMaxLength(str, maxLength = 31) {
        const result = [];
        if (!str || typeof str !== 'string') {
            return result;
        }

        let currentSegment = '';
        let charCount = 0; // 累计字符数，字母数字算0.5，其他算1

        // 遍历字符串中的每个字符
        for (let i = 0; i < str.length; i++) {
            const char = str[i];
            const isAlphaNumeric = /[a-zA-Z0-9，：]/.test(char);

            // 计算当前字符的权重（字母数字0.5，其他1）
            const weight = isAlphaNumeric ? 0.5 : 1;

            // 检查添加当前字符后是否会超过最大长度
            if (charCount + weight > maxLength) {
                // 先把当前片段添加到结果
                result.push(currentSegment);
                // 开始新的片段，添加当前字符
                currentSegment = char;
                // 重置计数为当前字符的权重
                charCount = weight;
            } else {
                // 添加到当前片段并累计计数
                currentSegment += char;
                charCount += weight;
            }
        }

        // 添加最后一个片段（如果有）
        if (currentSegment) {
            result.push(currentSegment);
        }

        return result;
    }

    function convertToDynamic2DArray(arr, firstChunkSize = 9, subsequentChunkSize = 19) {
        // 检查输入是否为数组
        if (!Array.isArray(arr)) {
            throw new Error('输入必须是一个数组');
        }

        // 验证 chunk 大小参数是否为有效正数
        if (!Number.isInteger(firstChunkSize) || firstChunkSize <= 0) {
            throw new Error('第一个子数组长度必须是正整数');
        }
        if (!Number.isInteger(subsequentChunkSize) || subsequentChunkSize <= 0) {
            throw new Error('后续子数组长度必须是正整数');
        }

        const result = [];
        const totalLength = arr.length;

        // 如果数组为空，直接返回空数组
        if (totalLength === 0) {
            return result;
        }

        // 处理第一个子数组
        const actualFirstChunkSize = Math.min(firstChunkSize, totalLength);
        result.push(arr.slice(0, actualFirstChunkSize));

        // 处理剩余的数据
        let remainingData = arr.slice(actualFirstChunkSize);
        const remainingLength = remainingData.length;

        if (remainingLength > 0) {
            const fullChunks = Math.floor(remainingLength / subsequentChunkSize);
            const hasPartialChunk = remainingLength % subsequentChunkSize !== 0;

            // 添加完整的子数组
            for (let i = 0; i < fullChunks; i++) {
                const start = i * subsequentChunkSize;
                const end = start + subsequentChunkSize;
                result.push(remainingData.slice(start, end));
            }

            // 添加最后一个可能不完整的子数组
            if (hasPartialChunk) {
                result.push(remainingData.slice(fullChunks * subsequentChunkSize));
            }
        }

        return result;
    }
</script>
<script>
    // 创建Vue实例并挂载到id为app的根元素上
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue.js!',
            formatList: formatList
        }
    });

</script>